<template>
  <div class="settingPersonalInformation">
    <div class="title">
      <span>个人信息</span> 
      <span @click="isClose(true)"><i class="el-icon-edit"></i> 编辑</span>
    </div>

    <div class="line"></div>

    <div class="infoWapper">

      <div class="infoBox">
        <span>昵称</span><div>{{userInfo.nickName || '默认名字'}}</div>
      </div>

      <div class="infoBox">
        <span>职位</span><div>{{userInfo.position ||'未设置'}}</div>
      </div>

      <div class="infoBox">
        <span>城市</span><div>{{userInfo.city||'未设置'}}</div>
      </div>

      <div class="infoBox">
        <span>性别</span><div>{{userInfo.sex ||'男'}}</div>
      </div>

      <div class="infoBox">
        <span>个性签名</span><div>未设置</div>
      </div>

    </div>

  <!-- 编辑个人信息 -->

    <div class="editor" v-if="isShow">
        <div class="moco-modal-title">
          <span>编辑个人信息</span>
          <span @click="isClose(false)"><i class="close el-icon-close"></i></span>
        </div>

        <div class="wapperForm">

          <form action="">
            <div class="moco-form-group">
              <span>昵称:</span>
              <div><input type="text" v-model="userInfo.nickName" class="moco-form-control"></div>
            </div>

            <div class="moco-form-group">
              <span>职位:</span>
              <div>
                <select name="" id="" class="moco-form-control" v-model="userInfo.position">
                  <option value="">请选择你的职业</option>
                  <option value="">web前端</option>
                  <option value="">Java后端</option>
                  <option value="">C语言</option>
                </select>
              </div>
            </div>

            <div class="moco-form-group">
              <span>性别:</span>
              <div class="sex">
                <label><input type="radio"  name="Sex" value="male" v-model='userInfo.sex'/>保密</label>
                <label><input type="radio" checked="checked" name="Sex" value="male" v-model='userInfo.sex'/>男</label>
                <label><input type="radio" name="Sex" value="female" v-model='userInfo.sex'/>女</label>
              </div>
            </div>

            <div class="moco-form-group">
              <span>个性签名:</span>
              <div><input type="text" placeholder="在这里输入个性签名" class="moco-form-control" v-model="userInfo.signature"></div>
            </div>
            <div class="moco-form-group">
              <button class="active" @click="handleUserInfo()">确定</button>
              <button @click="isClose(false)">取消</button>
            </div>
          </form>
          
        <div>

      </div>
      </div>
    </div>
  </div>
</template>

<script>
import {userInfo} from '../api/loginRegApi'
export default {
  created() {
    //获取本地用户信息
    this.userInfo = JSON.parse(localStorage.getItem('data'))
          if(this.userInfo === null){
            this.userInfo = {}
          }
  },
  data() {
    return {
      isShow : false,
      userInfo:{}
    }
  },
methods: {
  isClose(bool){
    this.isShow = bool
    console.log(this.isShow)
  },

  //修改用户信息
  async handleUserInfo(){
    console.log(this.userInfo)
    let res = await userInfo(`/back/user/editUser/?userId=${this.userInfo.userId}&nickName=${this.userInfo.nickName}`)
    console.log(res)
  }
},
}
</script>

<style>
@import url('../assets/css/settingPersonalInformation.css');
</style>